<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">优惠券</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view class="youhui" v-show="!showLoading">
			<view class="viewbox"></view>
			<u-sticky :offset-top="CustomBarh" h5-nav-height="0" bg-color="#F7F7F7">
				<view class="article_list_b" style="white-space:nowrap;">
					<u-subsection :list="list1" :current="clickIndex" @change="clicktab" bgColor="#fff" fontSize="30rpx"
						inactiveColor="#404040" activeColor="#E71102"></u-subsection>
				</view>
			</u-sticky>
			<view class="youhui-bg">
				<view v-for="(item,index) in youhuiList" class="content">
					<view>
						<view class="price">
							¥{{parseInt(item.money)}}
						</view>
						<view class="right">
							<text>{{item.name}}</text>
							<text>{{item.use_condition}}</text>
							<text>{{item.use_time_tips}}</text>
						</view>
					</view>
					<view class="btn-bg" @click="goPage('/pages/home/vendor',clickIndex)" :style="{backgroundColor: clickIndex==2?'#BBBBBB':'#E71102'}">
						{{getText(clickIndex)}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js';

	export default {
		data() {
			return {
				uid: 0,
				clickIndex: 0,
				showLoading: true,
				CustomBarh: 0,
				list1: [{
					name: '待使用',
				}, {
					name: '已使用',
				}, {
					name: '失效',
				}],
				youhuiList: [],
			}
		},
		onShow() {
			this.uid = uni.getStorageSync('uid');
		},
		onReady() {
			this.getList(0)
		},
		methods: {
			goPage(url,index) {
				if (index!=0) {
					return;
				}
				uni.navigateTo({
					url
				});
			},
			getList(type) {
				let paramsList = {
					uid: this.uid,
					type: type,
				}
				let optsList = {
					url: 'c-myCoupon',
					method: 'get'
				};
				let _this = this;
				request.httpRequest(optsList, paramsList).then(res => {
					this.youhuiList = res.data.data
					_this.showLoading = false
				});
			},
			clicktab(index) {
				this.clickIndex = index
				this.getList(index)
			},
			getText(state) {
				switch (parseInt(state)) {
					case 0:
						return '去使用';
					case 1:
						return '已使用';
					case 2:
						return '失效';
				}
			},
		}
	}
</script>
<style lang="scss">
	.youhui {

		// .u-tabs {
		.article_list_b {
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(225, 225, 225, 0.5);

		}
	}
</style>
<style lang="scss" scoped>
	.youhui-bg {
		margin-top: 42rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			width: 688rpx;
			height: 162rpx;
			background: #fff;
			// background: url('/static/youhui.png');

			background-repeat: no-repeat;
			background-position: top;
			background-size: 100% 100%;
			margin-bottom: 30rpx;

			.price {
				float: left;
				border-radius: 8rpx;
				width: 166rpx;
				height: 160rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 65rpx;
				color: #FFFFFF;
				line-height: 160rpx;
				text-align: center;
				font-style: normal;
				background: #E71102;
			}

			.btn-bg {
				margin-right: 24rpx;
				width: 140rpx;
				height: 53rpx;
				background: #E71102;
				border-radius: 50rpx;

				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 53rpx;
				text-align: center;
				font-style: normal;
			}

			.right {
				margin-top: 20rpx;
				padding-left: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;

				text {
					height: 38rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 38rpx;
					text-align: center;
					font-style: normal;
					white-space: nowrap;
				}

				text:first-child {
					height: 42rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
					font-style: normal;
				}
			}
		}

	}
</style>